<template>
<div>

<div class="slider">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../images/京东轮播1.jpg" alt="..." width="100%" >
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../images/京东轮播2.jpeg" alt="..." width="100%" >
      <div class="carousel-caption">
        ...
      </div>
    </div>
    
     <div class="item">
      <img src="../images/京东轮播3.jpg" alt="..." width="100%" >
      <div class="carousel-caption">
        ...
      </div>
    </div>

     <div class="item">
      <img src="../images/京东轮播4.jpg" alt="..." width="100%" >
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <!-- Controls -->

  <!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> -->
</div>
</div>

<div class="list">

        <div class="item" v-for="item in enters" :key="item.img"> 
           <router-link :to="{ name : item.href}">
               <img :src="item.img" :alt="item.title" width="35px" height="35px" >
               <h4 class="title1">{{item.title}}</h4>
           </router-link>
        
         </div>

               

</div>

</div>
</template>

<style lang="scss" >
@import "../css/element.scss";

.list{
    
    @include list(row) ;
    background-color: #fff;
    padding-top:25px;
    padding-bottom: 25px;
    justify-content: space-around ;   //平分横向空间
    text-decoration: none;
    .item{
        text-align: center;
        cursor: pointer;
        .title1{
          color: black;
          &:hover{
            color: red;
            text-decoration: none;
          }
        } 
          
        .img{
             
         display: inline-block;  
     
        }
    }
}

.slider{   height: auto;
    
    padding-top: 50px;
}

</style>
<script>
export default {
    // data(){
    //     return{
    //         enters: [] ,
    //         img:'',
    //         title: '',
    //         href: '',


    //     }
    // }
     data(){
        return{
            enters: [{
            img: "http://www.yjw.com/WEBPACK1/%E4%BA%AC%E4%B8%9C%E9%87%91%E8%9E%8D%E9%A1%B9%E7%9B%AE/images/%E6%96%B0%E9%97%BB%E8%B5%84%E8%AE%AF.jpg",
            title:"新闻咨询",
            href: "newlist",
                   },

                   {
            img:"http://www.yjw.com/WEBPACK1/%E4%BA%AC%E4%B8%9C%E9%87%91%E8%9E%8D%E9%A1%B9%E7%9B%AE/images/%E7%95%99%E8%A8%80%E5%8F%8D%E9%A6%88.jpg",
            title:"留言反馈",
            href: "doctor",
                   },

                   { 
            img:"http://www.yjw.com/WEBPACK1/%e4%ba%ac%e4%b8%9c%e9%87%91%e8%9e%8d%e9%a1%b9%e7%9b%ae/images/%e4%ba%ac%e4%b8%9c%e8%b4%ad%e7%89%a9.png",
            title:"京东购物",
            href: "",
                   },

                   { 
            img:"http://www.yjw.com/WEBPACK1/%E4%BA%AC%E4%B8%9C%E9%87%91%E8%9E%8D%E9%A1%B9%E7%9B%AE/images/%E8%A7%86%E9%A2%91%E4%B8%93%E5%8C%BA.jpg",
            title:"视频专区",
            href: "",
                   },

                   {  
            img:"http://www.yjw.com/WEBPACK1/%E4%BA%AC%E4%B8%9C%E9%87%91%E8%9E%8D%E9%A1%B9%E7%9B%AE/images/%E8%B4%AD%E7%89%A9%E5%95%86%E5%9C%BA.jpg",
            title:"购物商场",
            href: "",
                   },                   
            ] ,
            


        }
    }
    

}
</script>
